<!--
  * 角色 数据范围
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-09-12 22:34:00
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
  *
-->
<template>
  <div>
    <div class="btn-group">
      <a-button v-privilege="'system:role:dataScope:update'" class="button-style" type="primary"
                @click="updateDataScope"> 保存
      </a-button>
      <a-button v-privilege="'role:query'" class="button-style" @click="getDataScope"> 刷新</a-button>
    </div>
    <a-row class="header">
      <a-col :span="4" class="tab-margin">业务单据</a-col>
      <a-col :span="8" class="tab-data">查看数据范围</a-col>
      <a-col :span="12" class="tab-margin"/>
    </a-row>
    <div class="data-container">
      <a-row v-for="(item, index) in dataScopeList" :key="item.dataScopeType" align="middle" class="data"
             justify="center">
        <a-col :span="4" class="tab-margin">
          {{ item.dataScopeTypeName }}
        </a-col>
        <a-col :span="8" class="tab-data">
          <a-radio-group v-model:value="selectedDataScopeList[index].viewType">
            <a-radio
                v-for="scope in item.viewTypeList"
                :key="`${item.dataScopeType}-${scope.viewType}`"
                :value="scope.viewType"
                class="radio-style"
            >{{ scope.viewTypeName }}
            </a-radio
            >
          </a-radio-group>
        </a-col>
        <a-col :span="12" class="tab-margin tab-desc">
          <p>{{ item.dataScopeTypeDesc }}</p>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script setup>
import {message} from 'ant-design-vue';
import _ from 'lodash';
import {inject, onMounted, ref, watch} from 'vue';
import {roleApi} from '/@/api/system/role/role-api';
import {smartSentry} from '/@/lib/smart-sentry';

const props = defineProps({
  value: Number,
});

defineEmits(['update:value']);

// ----------------------- 显示 ---------------------------------

let selectRoleId = inject('selectRoleId');
let dataScopeList = ref([]);
let selectedDataScopeList = ref([]);

watch(
    () => selectRoleId.value,
    () => getRoleDataScope()
);

onMounted(getDataScope);

// 获取系统支持的所有种类的数据范围
async function getDataScope() {
  let result = await roleApi.getDataScopeList();
  dataScopeList.value = result.data;

  selectedDataScopeList.value = [];

  dataScopeList.value.forEach((item) => {
    selectedDataScopeList.value.push({
      viewType: undefined,
      dataScopeType: item.dataScopeType,
    });
  });
  getRoleDataScope();
}

// 获取数据范围根据角色id，并赋予选中状态
async function getRoleDataScope() {
  let result = await roleApi.getDataScopeByRoleId(selectRoleId.value);
  let data = result.data;
  selectedDataScopeList.value = [];

  dataScopeList.value.forEach((item) => {
    let find = data.find((e) => e.dataScopeType == item.dataScopeType);
    selectedDataScopeList.value.push({
      viewType: find ? find.viewType : undefined,
      dataScopeType: item.dataScopeType,
    });
  });
}

// ----------------------- 数据范围更新 ---------------------------------
// 更新
async function updateDataScope() {
  try {
    let data = {
      roleId: selectRoleId.value,
      dataScopeItemList: selectedDataScopeList.value.filter((e) => !_.isUndefined(e.viewType)),
    };
    await roleApi.updateRoleDataScopeList(data);
    message.success('保存成功');
    getDataScope();
  } catch (e) {
    smartSentry.captureError(e);
  }
}
</script>
<style lang="less" scoped>
.btn-group {
  text-align: right;
}

.button-style {
  margin: 0 10px;
}

.header {
  border-bottom: 1px solid #f2f2f2;
  font-weight: 600;
  margin: 10px 0px;
}

.tab-data {
  margin: 10px 0px;
}

.data-container {
  height: 680px;
  overflow-y: scroll;
}

.data {
  border-bottom: 1px solid #f2f2f2;
  margin: 10px 0px;
}

.radio-style {
  display: block;
  height: 30px;
  line-height: 30px;
}

.tab-margin {
  text-align: center;
  margin: 10px 0px;
}

.tab-desc {
  line-height: 30px;
  font-size: 16px;
  text-align: left;
}
</style>
